<template>
  <Row :gutter="15">
    <Col :span="6">
      <Menu :theme="theme" active-name="2-1" accordion width="auto" @on-select="selectMenu">
        <MenuGroup title="内容管理">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-paper" />
              内容管理
            </template>
            <MenuItem name="1-1">文章管理</MenuItem>
            <MenuItem name="1-2">评论管理</MenuItem>
            <MenuItem name="1-3">举报管理</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-people" />
              用户管理
            </template>
            <MenuItem name="2-1">新增用户</MenuItem>
            <MenuItem name="2-2">活跃用户</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-stats" />
              统计分析
            </template>
            <MenuGroup title="使用">
              <MenuItem name="3-1">新增和启动</MenuItem>
              <MenuItem name="3-2">活跃分析</MenuItem>
              <MenuItem name="3-3">时段分析</MenuItem>
            </MenuGroup>
            <MenuGroup title="留存">
              <MenuItem name="3-4">用户留存</MenuItem>
              <MenuItem name="3-5">流失用户</MenuItem>
            </MenuGroup>
          </Submenu>
        </MenuGroup>
        <MenuGroup title="统计分析">
          <MenuItem name="3">
            <Icon type="md-heart" />
            用户留存
          </MenuItem>
          <MenuItem name="4">
            <Icon type="md-leaf" />
            流失用户
          </MenuItem>
        </MenuGroup>
      </Menu>
    </Col>
    <Col :span="18">
      <Menu mode="horizontal" :theme="theme" active-name="3-1" @on-select="selectMainMenu">
        <MenuItem name="1">
          <Icon type="ios-paper" />
          内容管理
        </MenuItem>
        <MenuItem name="2">
          <Icon type="ios-people" />
          用户管理
        </MenuItem>
        <Submenu name="3">
          <template slot="title">
            <Icon type="ios-stats" />
            统计分析
          </template>
          <MenuGroup title="使用">
            <MenuItem name="3-1">新增和启动</MenuItem>
            <MenuItem name="3-2">活跃分析</MenuItem>
            <MenuItem name="3-3">时段分析</MenuItem>
          </MenuGroup>
          <MenuGroup title="留存">
            <MenuItem name="3-4">用户留存</MenuItem>
            <MenuItem name="3-5">流失用户</MenuItem>
          </MenuGroup>
        </Submenu>
        <MenuItem name="4">
          <Icon type="ios-construct" />
          综合设置
        </MenuItem>
      </Menu>
      <br>
      <p>Change theme</p>
      <RadioGroup v-model="theme">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
        <Radio label="primary"></Radio>
      </RadioGroup>
    </Col>
  </Row>
</template>

<script>
// import { Icon } from 'iview'
import CountTo from '_c/count-to'
export default {
  name: 'SampleMenu',
  data: () => {
    return {
      theme: 'light'
    }
  },
  methods: {
    selectMenu: function (name) {
      let methods = ['Message', 'Notice', 'Modal']
      let functions = ['success', 'info', 'error', 'warning']
      let method = '$' + methods[Math.trunc(methods.length * Math.random())]
      let func = functions[Math.trunc(functions.length * Math.random())]
      this[method][func]({
        duration: 10,
        render: h => {
          return h('span', [
            // render customized component
            h('Icon', {
              props: {
                type: 'logo-html5',
                color: '#ff9900'
              }
            }),
            name + ' was selected!'
          ])
        }
      })
    },
    selectMainMenu: function () {
      let $vm = this
      this.$Message.success({
        duration: 3,
        render: h => {
          return h(
            'p',
            [
              h('Icon', {
                props: {
                  type: 'ios-nuclear',
                  color: '#ed4014',
                  size: 36
                }
              }),
              h(CountTo, {
                props: {
                  init: 3,
                  startVal: 3,
                  end: 0,
                  delay: 500,
                  duration: 3,
                  uneasing: true
                },
                scopedSlots: {
                  left: () => h('span', '世界将在'),
                  right: () => h('span', 's 后重启')
                }
              })
            ]
          )
        },
        onClose: function () {
          // TODO should use vuex instead
          $vm.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.selectLeftTab(
            1 + Math.trunc(Math.random() * 3)
          )
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
